<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外出申请查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="div">
    <b style="color: red; font-size: 20px;">外出申请记录查询</b>
    <el-table :data="tableData">
        <el-table-column align="center" type=index label="序号" prop="id" width="100px"></el-table-column>
        <el-table-column align="center" prop="date" label="申请时间"></el-table-column>
        <el-table-column align="center" prop="userInfo.userNumber" label="学号/工号"></el-table-column>
        <el-table-column align="center" prop="userInfo.name" label="姓名"></el-table-column>
        <el-table-column align="center" prop="userInfo.identification" label="身份证号码" width="200"></el-table-column>
        <el-table-column align="center" prop="type" label="返校/出校"></el-table-column>
        <el-table-column align="center" prop="state" label="状态"></el-table-column>
    </el-table>
</div>

<script>
    new Vue({
        el: "#div",
        data: {
            tableData:[],
            user: {}
        },
        methods: {
            //分页查询功能
            selectByPage() {
                //向后台发送请求
                let param = "action=toShowApply&userId=" + this.user.userId;
                axios.post("/EpidemicControlSystem_war_exploded/OutApplyServlet", param)
                    .then(response => {
                        //将查询出的数据赋值给tableData
                        this.tableData = response.data.outApplies;
                    });
            },

            getUser() {
                axios.post("/EpidemicControlSystem_war_exploded/UserServlet", "action=user")
                    .then(res => {
                        this.user = res.data.loginUser;
                        //调用分页查询功能
                        this.selectByPage();
                    });
            }
        },
        created() {
            this.getUser();
        }
    });
</script>
</body>
</html>